<script setup lang="ts">
import {computed} from 'vue'
import {useData, withBase} from 'vitepress'

import VPNavbarSearch from './navbar/vp-search.vue'
import VPNavbarMenu from './navbar/vp-menu.vue'
import VPNavbarThemeToggler from './navbar/vp-theme-toggler.vue'
import VPNavbarTranslation from './navbar/vp-translation.vue'
import VPNavbarSocialLinks from './navbar/vp-social-links.vue'
import VPNavbarHamburger from './navbar/vp-hamburger.vue'

defineProps<{
  fullScreen: boolean
}>()

defineEmits(['toggle'])

const {theme, page} = useData()
</script>

<template>
  <div class="navbar-wrapper">
    <div class="header-container">
      <div class="logo-container">
        <a :href="withBase('/zh-CN/')">
          <img
              class="logo"
              src="/images/ikun-plus-logo.svg"
              alt="Ikun Plus Logo"
          />
          Ikun Plus
        </a>
      </div>
      <div class="content">
        <VPNavbarSearch class="search" :options="theme.agolia" multilang/>
        <VPNavbarMenu class="menu"/>
        <VPNavbarThemeToggler class="theme-toggler"/>
        <VPNavbarTranslation class="translation"/>
        <VPNavbarSocialLinks class="social-links"/>
        <VPNavbarHamburger
            :active="fullScreen"
            class="hamburger"
            @click="$emit('toggle')"
        />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.logo-container {
  display: flex;
  align-items: center;
  height: var(--header-height);

  > a {
    font-size: 30px;
    text-decoration: none;
  }

  .logo {
    position: relative;
    height: 100%;
  }
}

.dark {
  .logo {
    filter: drop-shadow(2px 2px 6px #409eff);
  }
}
</style>
